<template>
  <div class="tool_values">
    <TopHeader></TopHeader>
    <div class="mainTitle">
      <div class="container headArea">
        <div class="left">
          <div class="title">职业价值观测试</div>
          <div class="describe">当前测试进度 {{ tabNum + 1 }} / {{ worthData.length }}</div>
        </div>
        <div class="right">
          <div class="ansType">回答方式</div>
          <div class="choTypeArea">
            <el-radio-group v-model="ansType" @change="handleChoAnsType">
              <el-radio-button :label="1">再确认</el-radio-button>
              <el-radio-button :label="2">自动</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>
    <div :class="['container', 'qusArea', notAnsQus ? 'paddingTop24' : '']">
      <div v-for="(item,index) in worthData" :key="index">
        <div class="notAnsQuestion" v-show="index===tabNum && notAnsQus">
          <div class="tip">请选择答案后进入下一题</div>
          <img class="closeImage" @click="notAnsQus = false" src="../../assets/icon_close_red.png" alt="">
        </div>
        <div class="textQuestions" v-show="index===tabNum">
          <span>{{item.issue}}</span>
        </div>

        <div class="ansChoArea" v-show="index===tabNum">
          <div v-if="ansType == 1">
            <div :class="['choItem', radioIndex == m.score ? 'hasChooseRadioItem' : '']" v-for="(m, n) of ansScoreList" :key="n" @click="radioIndex = m.score;eachQuestion[n] = m.score">
              <img v-if="radioIndex == m.score" src="../../assets/login/radio_checked.png" alt="">
              <img v-else src="../../assets/login/radio_unchecked.png" alt="">
              <span>{{ m.title }}</span>
            </div>
          </div>
          <div v-else>
            <div :class="['choItem', radioIndex == m.score ? 'hasChooseRadioItem' : '']" v-for="(m, n) of ansScoreList" :key="n" @click="radioIndex = m.score;clzyjz(item.type, index, m.score)">
              <img v-if="radioIndex == m.score" src="../../assets/login/radio_checked.png" alt="">
              <img v-else src="../../assets/login/radio_unchecked.png" alt="">
              <span>{{ m.title }}</span>
            </div>
          </div>
        </div>

        <div class="submitBtn" v-show="ansType == 1 && index===tabNum && tabNum !== 59" @click="handleJumpNextQuestion(item.type, index)">下一题</div>
        
      </div>
      <div class="submitBtn" v-show="ansType == 1 && hasFinishTest" @click="handleSubmit">提交生成报告</div>
    </div>
  </div>
</template>

<script>
import ls from 'store2'
import TopHeader from "~/components/topHeader";
import worthData from '~/static/json/workValues.json'
export default {
  components: {
    TopHeader
  },
  data() {
    return {
      radioIndex:null,
      tabNum: 0,
      ansType: 1, // 答题方式  --->   1、再确认   2、自动
      worthData: worthData.history, // 价值观测试--题库
      ansScoreList: [{
        score: 5,
        title: '非常重要'
      }, {
        score: 4,
        title: '比较重要'
      }, {
        score: 3,
        title: '一般'
      }, {
        score: 2,
        title: '较不重要'
      }, {
        score: 1,
        title: '很不重要'
      }],
      zyjzgScore: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 得分
      eachQuestion: [], // 每道题的答案
      hasFinishTest: false,
      notAnsQus: false, // 是否没有回答该问题
    }
  },
  watch: {
    tabNum(num) {
      if (num == 59) {
        this.hasFinishTest = true
      }
    }
  },
  mounted() {
  },
  methods: {
    
    // 切换答题模式
    handleChoAnsType(type) {
      this.ansType = type
      if (this.ansType == 2) {
        this.notAnsQus = false
      }
    },
    // 存分
    clzyjz(typs, indexs, score) {
      this.eachQuestion[indexs] = score
      switch (typs) {
        case "1":
          this.zyjzgScore[0] += score
          break;
        case "2":
          this.zyjzgScore[1] += score
          break;
        case "3":
          this.zyjzgScore[2] += score
          break;
        case "4":
          this.zyjzgScore[3] += score
          break;
        case "5":
          this.zyjzgScore[4] += score
          break;
        case "6":
          this.zyjzgScore[5] += score
          break;
        case "7":
          this.zyjzgScore[6] += score
          break;
        case "8":
          this.zyjzgScore[7] += score
          break;
        case "9":
          this.zyjzgScore[8] += score
          break;
        case "10":
          this.zyjzgScore[9] += score
          break;
        case "11":
          this.zyjzgScore[10] += score
          break;
        case "12":
          this.zyjzgScore[11] += score
          break;
        case "13":
          this.zyjzgScore[12] += score
          break;
        case "14":
          this.zyjzgScore[13] += score
          break;
        default:
          this.zyjzgScore[14] += score
      }
      
      if (this.tabNum === 59) {
        let obj = {
          status: 3,
          worthScore: this.zyjzgScore,
          allResultAnswer: this.eachQuestion
        }
        ls.set('resultPar', obj)
        ls.set('workValuesResult', obj)
        this.commonJs.gosto('../testResult')
      } else {
        this.tabNum = indexs + 1;
      }
      this.radioIndex = null
    },
    // 点击'下一题'按钮
    handleJumpNextQuestion(type, index){
      if (this.radioIndex) {
        this.notAnsQus = false
        this.clzyjz(type, index, this.radioIndex)
      } else {
        this.notAnsQus = true
      }
    },
    handleSubmit() {
      if (this.radioIndex) {
        this.notAnsQus = false
        let obj = {
          status: 3,
          worthScore: this.zyjzgScore
        }
        ls.set('resultPar', obj)
        ls.set('workValuesResult', obj)
        this.commonJs.gosto('../testResult')
      } else {
        this.notAnsQus = true
      }
    },

  }
}
</script>

<style lang="less" scoped>
  @defaultColor: #1C2227;
  .tool_values {
    padding-bottom: 100px;
    .mainTitle {
      width: 100%;
      height: 120px;
      border: 2px solid rgba(204,204,204,0.3);
      padding-top: 33px;
      .headArea {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          .title {
            color: @defaultColor;
            font-size: 22px;
            line-height: 29px;
            font-weight: bold;
            margin-bottom: 8px;
          }
          .describe {
            color: #9E9E9E;
            font-size: 16px;
            line-height: 21px;
          }
        }
        .right {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .ansType {
            color: #6F7880;
            font-size: 14px;
            line-height: 19px;
            margin-right: 30px;
          }
          .choTypeArea {
            /deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
              background-color: #fff;
              border: none;
              color: @defaultColor;
              box-shadow: none;
            }
            /deep/ .el-radio-button__inner {
              border: none;
              color: #B8BCBF;
              background: #F7F7FA;
              width: 68px;
              height: 34px;
              line-height: 34px;
              border-radius: 17px;
              padding: 0;
            }
            .el-radio-group {
              border: 1px solid #F7F7FA;
              border-radius: 17px;
              background: #F7F7FA;
              label {
                margin: 0;
              }
            }
          }
        }
      }
    }
    .qusArea {
      padding-top: 64px;
      .notAnsQuestion {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
        margin-bottom: 24px;
        background: #FFF7F7;
        width: 100%;
        height: 44px;
        .tip {
          color: #EB4E3F;
          font-size: 14px;
        }
        .closeImage {
          width: 24px;
          height: 24px;
          cursor: pointer;
        }
      }
      .textQuestions {
        color: @defaultColor;
        font-size: 16px;
        line-height: 21px;
        font-weight: bold;
        margin-bottom: 56px;
      }
      .ansChoArea {
        .choItem {
          margin-bottom: 8px;
          min-width: 400px;
          height: 40px;
          line-height: 40px;
          cursor: pointer;
          img {
            width: 16px;
            height: 16px;
            margin-right: 32px;
          }
          span {
            font-size: 16px;
            line-height: 20px;
            color: #343A40;
          }
        }
        .choItem:hover { background: #F7F7FA; }
        .hasChooseRadioItem {
          background: #F7F7FA;
          span {
            color: #FF8A00;
          }
        }
      }
    }
    .paddingTop24 {
      padding-top: 24px;
    }
    .submitBtn {
      margin: 150px auto 0;
      width: 150px;
      height: 50px;
      line-height: 50px;
      background: #FF8A00;
      border-radius: 2px;
      color: #fff;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }
  }
</style>